<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="categories" type="java.util.List<com.lookwider.beans.JobCategory>" required="true" %>

<div class="carousel" data-role="carousel">
    <div class="slides">
        <c:forEach items="${categories}" var="category" varStatus="status">
            <c:set var="styleMargin" value="50px"/>

            <c:if test="${status.index % 2 == 0 }" >
                <c:set var="styleMargin" value="200px"/>
                <div class="slide bg-color-darken" id="slide${status.index}" >
            </c:if>

            <!-- Assigned id's to SPANS to identify JS what requires to be resized-->
            <div class="span6 bg-color-${category.color}" id="${category.id}" style="height: 150px; margin-left: ${styleMargin};">
                <h2><a href="#${category.id}" style="font-size: 1em;">&nbsp; ${category.name}</a></h2>
                <div class="arrowbtnopen" style="float: right; margin-top: 70px;">
                    <a href="#${category.id}"><i class="icon-arrow-down-right fg-color-white"></i></a>
                </div>
            </div>

            <c:if test="${(status.index % 2) != 0 || status.last}" >
                <div class="description">
                    Chose filter for navigation
                </div>
                </div>
            </c:if>
        </c:forEach>
    </div>
    <span class="control left">&lsaquo;</span>
    <span class="control right">&rsaquo;</span>
</div>
